<template>
  <view :style="[cusStyle]" :class="[cusClass]" class="mxp-list-item-info" @click="onClick">
    <slot name="prefix">
      <image
        v-if="icon"
        style="display: block"
        mode="scaleToFill"
        :style="{ width: iconSize, height: iconSize, marginRight: iconMarginRight }"
        :src="icon"
      ></image>
    </slot>
    <view class="content-view" :style="[contentStyle]">
      <view class="title-box">
        <slot name="title">
          <text :style="[{ fontSize: titleSize, color: titleColor || defThemeColor.text }]">{{ title }}</text>
        </slot>
      </view>
      <view class="right-view">
        <slot>
          <text v-if="info" key="text-1" class="right" :style="[{ fontSize: infoSize, color: infoColor || defThemeColor.text }]">{{ info }}</text>
          <text v-else key="text-2" class="text" :style="[{ fontSize: placeholderSize, color: placeholderColor || defThemeColor.text2 }]">
            {{ placeholder }}
          </text>
        </slot>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import type { CSSProperties, PropType } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { defThemeColor } from '../mxp-tool/theme/theme';
  defineOptions({
    name: 'mxp-list-item-info',
  });

  defineProps({
    /** 图标 */
    icon: { type: String, default: '' },
    /** 图标大小 */
    iconSize: { type: String as PropType<$SizeUnitStr>, default: '16px' },
    /** 图标距离右边的边距 */
    iconMarginRight: { type: String as PropType<$SizeUnitStr>, default: ' 4px' },
    /** 是否有点击效果 */
    title: { type: [String, Number], default: '' },
    /** 标题的颜色 */
    titleColor: { type: String as PropType<$AllColorStr>, default: undefined },
    /** 标题的字体大小 */
    titleSize: { type: String as PropType<$SizeUnitStr>, default: '15px' },
    /** 箭头大小 */
    info: { type: String, default: '' },
    /** info文字大小 */
    infoSize: { type: String as PropType<$SizeUnitStr>, default: '14px' },
    /** info文字颜色 */
    infoColor: { type: String as PropType<$AllColorStr>, default: undefined },
    /** 占位文字颜色 */
    placeholder: { type: [String, Number], default: '' },
    /** 占位文字大小 */
    placeholderSize: { type: String as PropType<$SizeUnitStr>, default: '14px' },
    /** 占位文字颜色 */
    placeholderColor: { type: String as PropType<$AllColorStr>, default: undefined },
    /** 右边容器的样式 */
    contentStyle: { type: Object as PropType<CSSProperties>, default: () => ({}) },
    ...publicStyeProps,
  });
  defineSlots<{
    /** 前缀 */
    prefix: () => void;
    /** 标题 */
    title: () => void;
    /** 主体内容 */
    default: () => void;
  }>();
  const emits = defineEmits<{
    (e: 'click'): void;
  }>();
  /** 点击事件 */
  function onClick() {
    emits('click');
  }
</script>

<style scoped lang="scss">
  .mxp-list-item-info {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;

    .content-view {
      display: flex;
      flex: 1;
      flex-flow: row nowrap;
      align-items: stretch;
      justify-content: center;

      .title-box {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-start;
      }
    }

    .right-view {
      display: flex;
      flex: 1;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
    }
  }
</style>
